<!--报单详情信息-->
<template>
  <div class="app-container">
    <el-row>
      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header"><span>活动信息</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%;">
              <thead>
                <tr>
                  <th class="is-leaf"><div class="cell">属性</div></th>
                  <th class="is-leaf"><div class="cell">值</div></th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td><div class="cell">活动名</div></td>
                  <td><div class="cell">{{ detailInfo.projectName }}</div></td>
                </tr>
                <tr>
                  <td><div class="cell">公告</div></td>
                  <td><div class="cell">{{ detailInfo.remark }}</div></td>
                </tr>
                <tr>
                  <td><div class="cell">模板</div></td>
                  <td><div class="cell">{{ detailInfo.rebateRate }}</div></td>
                </tr>
                <tr>
                  <td><div class="cell">创建时间</div></td>
                  <td><div class="cell">{{ detailInfo.createTime }}</div></td>
                </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>

      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header"><span>额度详情</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%;">
              <thead>
                <tr>
                  <th class="is-leaf"><div class="cell">属性</div></th>
                  <th class="is-leaf"><div class="cell">值</div></th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td><div class="cell">单品金额</div></td>
                  <td><div class="cell">{{ detailInfo.singleMaxAmount }}</div></td>
                </tr>
                <tr>
                  <td><div class="cell">返利点</div></td>
                  <td><div class="cell">{{ detailInfo.rebateRate }}</div></td>
                </tr>
                <tr>
                  <td><div class="cell">有日期</div></td>
                  <td><div class="cell">{{ detailInfo.endDate }}</div></td>
                </tr>
                <tr>
                  <td><div class="cell">最大金额</div></td>
                  <td><div class="cell">{{ detailInfo.currentAmount }}</div></td>
                </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>

      <el-col :span="24" class="card-box">
        <el-card>
          <div slot="header">
            <span>最近提交表单</span>
          </div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <el-table :key="tableKey" v-loading="listLoading" :data="list" height="250" highlight-current-row style="width: 100%;">
              <el-table-column label="序号" type="index" :index="indexMethod" />
              <el-table-column label="项目名称" width="150px">
                <template slot-scope="{row}">
                  <span>{{ row.projectName }}</span>
                </template>
              </el-table-column>
              <el-table-column label="渠道" width="60px" align="center">
                <template slot-scope="{row}">
                  <span>{{ row.userName }}</span>
                </template>
              </el-table-column>
              <el-table-column label="支付金额" width="80px" align="center">
                <template slot-scope="{row}">
                  <span>{{ row.payAmount }}元</span>
                </template>
              </el-table-column>
              <el-table-column label="订单号" width="150px" align="center">
                <template slot-scope="{row}">
                  <span>{{ row.orderId }}</span>
                </template>
              </el-table-column>
              <el-table-column label="姓名" width="150px" align="center">
                <template slot-scope="{row}">
                  <span>{{ row.receiveName }}</span>
                </template>
              </el-table-column>
              <el-table-column label="电话" width="120px" align="center">
                <template slot-scope="{row}">
                  <span>{{ row.phone }}</span>
                </template>
              </el-table-column>
              <el-table-column label="地址" width="300px" align="center">
                <template slot-scope="{row}">
                  <span>{{ row.receiveAddress }}</span>
                </template>
              </el-table-column>
              <el-table-column label="返佣比例" width="100px" align="center">
                <template slot-scope="{row}">
                  <span>{{ row.rebateRate }}%</span>
                </template>
              </el-table-column>
              <el-table-column label="返佣金额" width="80px" align="center">
                <template slot-scope="{row}">
                  <span>{{ row.rebateAmount }}元</span>
                </template>
              </el-table-column>
              <el-table-column label="订单截图" width="150px" align="center">
                <template slot-scope="{row}">
                  <span>
                    <div class="demo-image__preview">
                      <el-image style="width: 50px; height: 50px" :src="row.orderImgs[0]" :preview-src-list="row.orderImgs" />
                    </div>
                  </span>
                </template>
              </el-table-column>
              <el-table-column label="尾款截图" width="150px" align="center">
                <template slot-scope="{row}">
                  <span>
                    <div class="demo-image__preview">
                      <el-image style="width: 50px; height: 50px" :src="row.payImg" :preview-src-list="[row.payImg]" />
                    </div>
                  </span>
                </template>
              </el-table-column>
              <el-table-column label="收货截图" width="150px" align="center">
                <template slot-scope="{row}">
                  <span>
                    <div class="demo-image__preview">
                      <el-image style="width: 50px; height: 50px" :src="row.payImg" :preview-src-list="[row.receiveImg]" />
                    </div>
                  </span>
                </template>
              </el-table-column>
              <el-table-column label="报单时间" width="160px" align="center">
                <template slot-scope="{row}">
                  <span>{{ row.createTime }}</span>
                </template>
              </el-table-column>
            </el-table>
            <pagination v-show="total>0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.limit" @pagination="getList" />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { tableInfo, crudUtil } from '@/utils/future/toolkit'
import { fetchActivity } from '@/api/purch/purchActivity'
import { fetchOrderList } from '@/api/purch/purchOrder'
import Pagination from '@/components/Pagination'

export default {
  name: 'RebateOrderDetailInfo',
  components: { Pagination },
  filters: {
    statusFilter(status) {
      const statusMap = { 1: 'success', 2: 'info', 3: 'danger' }
      return statusMap[status]
    }
  },
  data() {
    const tempDate = {
      detailInfo: {

      },
      // 列表序号
      indexMethod: 1
    }
    const result = Object.assign(tempDate, tableInfo)
    return result
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      var that = this
      that.queryParams.activityId = this.$route.query.activityId
      crudUtil.getList(that, fetchOrderList)
      fetchActivity(that.queryParams.activityId).then(response => {
        that.detailInfo = response
      })
    }
  }
}
</script>

<style scoped>
.mixin-components-container {
  background-color: #f0f2f5;
  padding: 30px;
  min-height: calc(100vh - 84px);
}
.component-item{
  min-height: 100px;
}
</style>
